<template>
  <div class="test-information">
    <white-header
      :isShowTopNav="true"
      :isShowBack="true"
      :isShowRight="true"
      :title="title"
    ></white-header>
    <ul class="information-menu">
      <li
        :class="['menu-item', menuType === 1 ? 'active' : '']"
        @click="menuHandle(1)"
      >
        考试指南
      </li>
      <li
        :class="['menu-item', menuType === 2 ? 'active' : '']"
        @click="menuHandle(2)"
      >
        资料大纲
      </li>
      <li
        :class="['menu-item', menuType === 3 ? 'active' : '']"
        @click="menuHandle(3)"
      >
        学习分享
      </li>
    </ul>
    <div class="information-list">
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-list
          v-model="is_pull_loading"
          :finished="finished"
          :finished-text="modules_item_list.length == 0 ? '' : '没有更多了'"
          @load="handleLoad"
        >
          <div
            :class="[
              'list-item',
              item.cover ? 'hasimg' : null,
              item,
              item.isRead ? 'read' : null
            ]"
            v-for="(item, index) in modules_item_list"
            :key="'modules_item_list' + index"
            @click="toPath(item)"
          >
            <div class="item-left">
              <div class="title">
                <p>{{ item && item.title }}</p>
              </div>
              <div class="information-info">
                <p>
                  {{ formatDate(item.createTime) }} 发布者：{{
                    item.userName || "未知"
                  }}
                </p>
              </div>
            </div>
            <div class="item-right">
              <img v-lazy="item.cover" :key="item.cover" v-if="item.cover" />
            </div>
          </div>
          <van-empty
            v-if="modules_item_list && modules_item_list.length == 0"
            :description="'暂无消息哦~'"
          />
        </van-list>
      </van-pull-refresh>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions, mapMutations } from "vuex";
import WhiteHeader from "~/components/mobile/WhiteHeader.vue";
import {
  getExamInfoModule,
  getExamInfoList,
  getExamInfoOne
} from "~/api/v2-question-bank/question-bank.js";
export default {
  components: {
    WhiteHeader
  },
  scrollToTop: true,
  data() {
    return {
      title: "考试资讯",
      /* 资讯类型 */
      menuType: 1,
      /* 考试咨询板块 */
      modules_list: [],
      page: 1,
      pageSize: 10,
      total: [],
      /* 考试咨询列表 */
      modules_item_list: [],
      /* 上拉加载loading */
      is_pull_loading: false,
      /* 上拉加载完成 */
      finished: false,
      /* 下拉刷新 */
      refreshing: false
    };
  },
  computed: {
    ...mapState({
      user_info(state) {
        return state.user_info;
      },
      token(state) {
        return state.token;
      },
      is_loading(state) {
        return state.is_loading;
      }
    }),
    questionId() {
      return this.$route.query.id;
    },
    notifiType() {
      return Number(this.$route.query.menuType);
    }
  },
  watch: {},
  methods: {
    ...mapMutations(["SET_IS_LOADING"]),
    /* 板块切换 */
    menuHandle(type) {
      this.menuType = type;
      this.page = 1;
      this.$router.replace('/m/v2-test-information?id='+this.questionId+'&menuType=' + type);
      this.getExamInfoItem();
    },
    formatDate(timestamp) {
      let date = new Date(timestamp);
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();
      let hour = date.getHours();
      let minute = date.getMinutes();
      let second = date.getSeconds();
      let add0 = m => {
        return m < 10 ? "0" + m : m;
      };
      let showTime = null;
      if (new Date(timestamp).toDateString() === new Date().toDateString()) {
        if (hour < 10) {
          showTime = "上午";
        } else if (hour < 12) {
          showTime = "中午";
        } else if (hour < 18) {
          showTime = "下午";
        } else {
          showTime = "晚上";
        }
        // console.log("今天", showTime + " " + add0(hour) + ":" + add0(minute));
        return showTime + " " + add0(hour) + ":" + add0(minute);
      } else {
        // console.log("以前", add0(year) + "/" + add0(month) + "/" + add0(day));
        return add0(year) + "/" + add0(month) + "/" + add0(day);
      }
    },
    /* 跳转详情 */
    toPath(detail) {
      this.$router.push({
        path: "/m/notice-detail",
        query: {
          type: "v2-quesiton-bank",
          id: detail.id
        }
      });
    },
    /* 获取板块咨询板块 */
    async getExamInfoModule() {
      this.SET_IS_LOADING(true);
      let params = {
        questionGroupId: this.questionId,
        sort: "orderIndex desc"
      };
      let result = await getExamInfoModule(params);
      console.log("获取考试咨询板块:", result);
      if (result && result.data && result.data.code) {
        const { rows, records } = result.data.data;
        this.modules_list = rows;
      }
      this.SET_IS_LOADING(false);
    },
    /* 获取板块咨询列表 */
    async getExamInfoItem(type) {
      if (type == "loadmore") {
        if (this.modules_item_list.length >= this.total) {
          return false;
        }
        this.finished = false;
        this.is_pull_loading = true;
      }
      if (type == "pulldown") {
        this.refreshing = true;
      }
      this.SET_IS_LOADING(true);
      let params = {
        questionGroupId: this.questionId,
        sort: "orderIndex desc",
        offset: (this.page - 1) * this.pageSize,
        limit: this.pageSize,
        status: 1,
        type: this.menuType
      };
      if (this.token && Object.keys(this.user_info).length > 0) {
        params = {
          ...params,
          user: this.user_info.id
        }
      }
      let result = await getExamInfoList(params);
      console.log("获取考试资讯列表:", result);
      if (result && result.data && result.data.code) {
        const { rows, records } = result.data.data;
        if (type == "loadmore") {
          this.modules_item_list = [...this.modules_item_list, ...rows];
        } else {
          this.modules_item_list = rows;
        }
        this.total = records;
      }
      this.finished = true;
      this.is_pull_loading = false;
      this.refreshing = false;
      this.SET_IS_LOADING(false);
    },
    /* 上拉加载 */
    handleLoad() {
      this.getExamInfoItem("loadmore");
    },
    /* 下拉刷新 */
    onRefresh() {
      this.page = 1;
      this.getExamInfoItem("pulldown");
    },
    /* 初始化页面 */
    initPage() {
      if (this.notifiType) {
        this.menuType = this.notifiType;
      }
      this.getExamInfoItem();
    }
  },
  created() {
    this.initPage();
  },
  activated() {
    this.initPage();
  },
  mounted() {}
};
</script>

<style lang="scss" scoped>
.test-information {
  background-color: #f7f7fa;
  min-height: 100vh;
  width: 7.2rem;
  .information-menu {
    position: fixed;
    top: 0.9rem;
    left: 0;
    z-index: 9;
    width: 7.2rem;
    height: 0.768rem;
    background-color: #ffffff;
    display: flex;
    justify-content: space-between;
    .menu-item {
      width: 33.3333%;
      height: 0.768rem;
      text-align: center;
      line-height: 0.768rem;
      font-size: 0.2688rem;
      font-weight: bold;
      position: relative;
      color: #949699;
      &.active {
        color: #313233;
      }
      &.active::after {
        content: "";
        display: block;
        position: absolute;
        left: 50%;
        bottom: 0;
        width: 0.576rem;
        height: 0.0384rem;
        transform: translateX(-50%);
        background-color: var(--theme-color);
      }
    }
  }
  .information-list {
    width: 7.2rem;
    margin-top: 0.968rem;
    .list-item {
      width: 7.2rem;
      height: 2.016rem;
      background-color: #ffffff;
      margin-bottom: 0.2rem;
      padding: 0.288rem;
      position: relative;
      display: flex;
      &::after {
        content: "";
        display: block;
        position: absolute;
        left: 0.16rem;
        top: 0.34rem;
        width: 0.1rem;
        height: 0.1rem;
        background-color: #ff4e4e;
        border-radius: 50%;
      }
      .item-left {
        width: 100%;
        .title {
          font-size: 0.288rem;
          line-height: 0.4rem;
          height: 0.8rem;
          font-weight: bold;
          color: #313233;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          overflow: hidden;
          text-overflow: ellipsis;
          -webkit-box-orient: vertical;
        }
        .information-info {
          margin-top: 0.2rem;
          color: #babec2;
          font-size: 0.2496rem;
        }
      }
      .item-right {
        width: 0%;
        display: none;
        position: relative;
        img {
          width: 1.95rem;
          height: 1.3rem;
          background-color: var(--theme-color);
          display: block;
          // position: absolute;
          // left: 0;
          // top: 0;
          // right: 0;
          // bottom: 0;
          // margin: auto;
          overflow: hidden;
          border-radius: 0.05rem;
        }
      }
    }
    .list-item.read {
      &::after {
        display: none;
      }
      .item-left {
        .title {
          color: #babec2;
        }
      }
      .item-right {
      }
    }
    .list-item.hasimg {
      .item-left {
        width: 70%;
      }
      .item-right {
        display: block;
        width: 30%;
      }
    }
  }
}
</style>
<style lang="scss">
.test-information {
  .van-list {
    min-height: 80vh;
  }
}
</style>
